<template>
  <div class="continer">
    <div class="title-text">Element-plus</div>
    <el-button style="width: 30%" type="primary" @click="hellow()">你好</el-button>
    <div class="title-text">Echarts</div>
    <div id="main" style="width: 50%; height: 400px"></div>
    <div class="flex">
      <div>
        <el-tag>Pinia的Name</el-tag>
        <div class="title-text">{{ name }}</div>
      </div>
      <div>
        <el-tag>使用Pinia的getter</el-tag>
        <div class="title-text">{{ store.doubleCount }}</div>
      </div>
      <div>
        <el-button type="primary" @click="add()">使用Pinia的action</el-button>
        <div class="title-text">{{ Number1 }}</div>
      </div>
    </div>
    <div class="less">
      Less
      <div class="lessChild">Less</div>
    </div>
  </div>
</template>

<script  lang="ts">
import { useStore } from "../../stores/store";
import { storeToRefs } from "pinia";
import { defineComponent, ref, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  setup() {
    const store = useStore();
    const storeObj = storeToRefs(store); //解构stroe，解决响应问题
    const data = reactive({});
    return {
      store: store,
      ...toRefs(data),
      ...toRefs(storeObj),
    };
  },
  methods: {
    hellow(){
      (this as any).$message({
      message: "您好！",
      type: "success",
    });
    },
    add() {
      this.store.add();
    },
  },
  mounted() {
    const myChart = (this as any).$echarts.init(
      document.getElementById("main")
    );
    const option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };

    
  },
});
</script>

<style scoped lang="less">
.continer {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  .less {
    font-size: 50px;
    color: red;
    .lessChild {
      color: @color-mainGreen;
    }
  }
}
</style>
